import { Component, OnInit, ViewChild } from '@angular/core';
import echarts from 'echarts';

@Component({
  selector: 'app-e-charts',
  templateUrl: './e-charts.page.html',
  styleUrls: ['./e-charts.page.scss'],
})

export class EChartsPage implements OnInit {

  @ViewChild('chart', { static: true }) chart;
  constructor() { }

  ngOnInit() {
    this.getEchart();
    this.setpie();
  }
  getEchart() {
    //月份是从0-11这个常识就不用说了
    let year = 2001; let mount = 0; let date = 1;//获取开始年月日
    let timed = +new Date(year, mount, date);//将开始年月日转换成时间戳
    let oneDay = 24 * 3600 * 1000;
    let timing = +new Date();//获取结束时间戳
    let dates = (timing - timed) / 86400000//开始结束相差的天数
    let xdate = [];
    var num = [Math.random() * 300];
    for (let i = 0; i <= dates; i++) {//根据天数循环添加
      let now = new Date(timed += oneDay)
      xdate.push([now.getFullYear(), now.getMonth() + 1, now.getDate() - 1].join('/'));//获取X时间数据
      num.push(Math.round((Math.random() - 0.5) * 20 + num[i]));//模拟数据
    }

    //注意！如果在这有小伙伴报错的话可以把接下来的代码挪到一个回调函数里，别问我为什么我也不知道
    let myChart = echarts.init(<HTMLDivElement>document.getElementById('chart'));
    let option = {
      title: {
        text: 'linecharts 标题',
        subtext: '纯属虚构',
        x: 'center'
      },
      tooltip: {
        trigger: 'axis',
        position: function (pt) {
          return [pt[0], '10%'];
        }
      },
      xAxis: {
        type: 'category',
        boundaryGap: false,
        data: xdate,
      },
      yAxis: {
        type: 'value',
        boundaryGap: [0, '100%']
      },
      dataZoom: [{
        type: 'inside',
        start: 90,
        end: 100,
      }],
      series: [
        {
          name: '模拟数据',
          type: 'bar',
          smooth: true,
          symbol: 'none',
          sampling: 'average',
          itemStyle: {
            color: 'rgb(255, 70, 131)'
          },
          data: num
        }
      ]
    };
    myChart.setOption(option);
  }
  setpie() {
    //月份是从0-11这个常识就不用说了
    let year = 2001; let mount = 0; let date = 1;//获取开始年月日
    let timed = +new Date(year, mount, date);//将开始年月日转换成时间戳
    let oneDay = 24 * 3600 * 1000;
    let timing = +new Date();//获取结束时间戳
    let dates = (timing - timed) / 86400000//开始结束相差的天数
    let xdate = [];
    var num = [Math.random() * 300];
    for (let i = 0; i <= dates; i++) {//根据天数循环添加
      let now = new Date(timed += oneDay)
      xdate.push([now.getFullYear(), now.getMonth() + 1, now.getDate() - 1].join('/'));//获取X时间数据
      num.push(Math.round((Math.random() - 0.5) * 20 + num[i]));//模拟数据
    }
    //注意！如果在这有小伙伴报错的话可以把接下来的代码挪到一个回调函数里，别问我为什么我也不知道
    let myChart = echarts.init(<HTMLDivElement>document.getElementById('pie'));
    let option = {
      title: {
        text: '某站点用户访问来源',
        subtext: '纯属虚构',
        x: 'center'
      },
      tooltip: {
        trigger: 'item',
        formatter: "{a} <br/>{b} : {c} ({d}%)"
      },
      legend: {
        orient: 'vertical',
        x: 'left',
        data: ['直接访问', '邮件营销', '联盟广告', '视频广告', '搜索引擎']
      },
      toolbox: {
        show: true,
        feature: {
          mark: { show: true },
          dataView: { show: true, readOnly: false },
          magicType: {
            show: true,
            type: ['pie', 'funnel'],
            option: {
              funnel: {
                x: '25%',
                width: '50%',
                funnelAlign: 'left',
                max: 1548
              }
            }
          },
          restore: { show: true },
          saveAsImage: { show: true }
        }
      },
      calculable: true,
      series: [
        {
          name: '访问来源',
          type: 'pie',
          radius: '55%',
          center: ['50%', '60%'],
          data: [
            { value: 335, name: '直接访问' },
            { value: 310, name: '邮件营销' },
            { value: 234, name: '联盟广告' },
            { value: 135, name: '视频广告' },
            { value: 1548, name: '搜索引擎' }
          ]
        }
      ]
    };

    myChart.setOption(option);
  }

}
